<template>
  <div class="contain">
    <div class="top">
      <img src="7dhur6i77hg_11350267611625208274363.png" alt="" />
      <a href="#">请登录</a>
      <img class="pic" src="icon_arrow_right_darkgray.png" alt="" />
    </div>
    <div class="middle"><i>我的订单</i> <img class="pic" src="icon_arrow_right_darkgray.png" alt="" /></div>
    <div class="center">
      <div class="box">
        <img src="1su4kcv21eg_22212270231600948691418.png" alt="" /><a href="#"
          >待付款</a
        >
      </div>
      <div class="box">
        <img src="2rsi345c8a_22212270231600948691450.png" alt="" /><a href="#"
          >待收货</a
        >
      </div>
      <div class="box">
        <img src="n9q7tuhs6ao_22212270231600948691455.png" alt="" /><a href="#"
          >评价</a
        >
      </div>
      <div class="box">
        <img src="q69ib1u9teg_22212270231600948691439.png" alt="" /><a href="#"
          >退款/售后</a
        >
      </div>
    </div>
    <div class="bottom1">
      <div class="box1">
        <img src="ucenter_icon_myassets.png" alt="" /><a href="#">我的资产</a> <img class="pic1" src="icon_arrow_right_darkgray.png" alt="" />
      </div>
      <div class="box1">
        <img src="ucenter_icon_coupon_new.png" alt="" /><a href="#">优惠券</a> <img class="pic1" src="icon_arrow_right_darkgray.png" alt="" />
      </div>
      <div class="box1 box2">
        <img src="ucenter_icon_collection.png" alt="" /><a href="#">我的收藏</a> <img class="pic1" src="icon_arrow_right_darkgray.png" alt="" />
      </div>
      </div>

      <div class="bottom2">
      <div class="box1">
        <img src="ucenter_icon_address.png" alt="" /><a href="#">地址管理</a> <img class="pic1" src="icon_arrow_right_darkgray.png" alt="" />
      </div>
      <div class="box1">
        <img src="img.png" alt="" /><a href="#">资质证照</a> <img class="pic1" src="icon_arrow_right_darkgray.png" alt="" />
      </div>
      <div class="box1">
        <img src="img (1).png" alt="" /><a href="#">协议规则</a> <img class="pic1" src="icon_arrow_right_darkgray.png" alt="" />
      </div>
      <div class="box1">
        <img src="ucenter_icon_feedback.png" alt="" /><a href="#">帮助与反馈</a> <img class="pic1" src="icon_arrow_right_darkgray.png" alt="" />
      </div>
    </div>
    <Bb />
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.contain {
  width: 4.14rem;
  height: 8.96rem;
  background-color: #f3f3f3;
}
.top {
  width: 4.14rem;
  height: 1.1rem;
  background-color: #876243;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.top img {
  display: inline-block;
  width: 0.66rem;
  height: 0.66rem;
  transform: translateX(-0.1rem);
}
.top a {
  font-size: 0.16rem;
  color: #fff;
  display: inline-block;
  transform: translateX(-0.7rem);
}
.top .pic {
  display: inline-block;
  width: 0.16rem;
  height: 0.16rem;
  padding-right: 0.2rem;
}
.middle {
  width: 4rem;
  height: 0.43rem;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.05rem;
}
.middle span {
  display: inline-block;
  font-size: 0.2rem;
  transform: translateX(-0.6rem);
}
.middle i {
  display: inline-block;
  font-style: normal;
  font-size: 0.16rem;
  line-height: 0.16rem;
  text-indent: 0.22rem;
}
.center {
  width: 4.14rem;
  height: 0.76rem;
  background-color: #fff;
}
.center .box {
  width: 0.64rem;
  height: 0.76rem;
  text-align: center;
  float: left;
  margin-right: 0.15rem;
  margin-left: 0.15rem;
}
.center .box img {
  width: 0.4rem;
  height: 0.4rem;
  transform: translateY(-0.6rem);
}
.center .box a {
  font-size: 0.12rem;
  color: #666666;
  display: block;
  transform: translateY(-0.8rem);
}
.bottom1{
  width: 4.14rem;
  height: 1.67rem;
  margin-top: 0.05rem;
  background-color: #fff;
}
.bottom1 .box1{
  width: 4.14rem;
  height: 0.53rem;
  line-height: 0.53rem;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottom1 .box2{
  border-bottom: none;
  margin-bottom: 0.05rem;
}
.bottom1 .box1 img{
  width:0.42rem ;
  height:0.42rem ;
  transform: translateX(0.16rem);
}
.bottom1 .box1 a{
  font-size: 0.14rem;
  line-height: 0.28rem;
  transform: translateX(-1.4rem)
}
.bottom1 .box1 .pic1{
   display: inline-block;
  width: 0.16rem;
  height: 0.16rem;
  transform: translateX(-0.7rem)
  
}
.bottom2{
  width: 4.14rem;
  height: 2.rem;
  margin-top: 0.05rem;
  background-color: #fff;
}
.bottom2 .box1{
  width: 4.14rem;
  height: 0.53rem;
  line-height: 0.53rem;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottom2 .box1 img{
  width:0.42rem ;
  height:0.42rem ;
  transform: translateX(0.16rem);
}
.bottom2 .box1 a{
  font-size: 0.14rem;
  line-height: 0.28rem;
  transform: translateX(-1.4rem)
}
.bottom2 .box1 .pic1{
   display: inline-block;
  width: 0.16rem;
  height: 0.16rem;
  transform: translateX(-0.7rem)
  
}
::-webkit-scrollbar{
	display: none;
}
</style>